<template>
    <div class="myTicket">               
        <!--导航栏-->        
        <div class="myTicketNav">
            <img src="../../assets/image/ticket/arrow.png" alt="" @click="$router.go(-1)"/>
            <tab>
                <tab-item selected @on-item-click="onItemClick">未使用</tab-item>                    
                <tab-item @on-item-click="onItemClick">已使用</tab-item>                
            </tab>
            <img src="../../assets/image/ticket/help.png" alt="" @click.stop="help"/>
        </div>                

        <scroller :on-infinite="infinites" ref='myScroller' class='myScroller'>   
            <div class="myTicketUnused" @click="goGetTicket" v-if="unUsedTicket>0&&unUsedTicket!=''">
                <p>还有<span>{{unUsedTicket}}</span>张代金券,速来领取<label></label></p>
            </div>
            <div class="allGroup">
                <div class="commentList" v-for='(item,index) in allGroupVoucher' :key="index"
                     :class="{
                     category_1:item.CATEGORY==1,
                     category_2:item.CATEGORY==2,
                     category_3:item.CATEGORY==3,
                     category_4:item.CATEGORY==4,
                     category_5:item.CATEGORY==5,
                     category_6:item.CATEGORY==6,
                     category_7:item.CATEGORY==7,
                     category_gray:item.OUT_OF_DATE==1,
                     category_used:item.STATUS==2
                     }" 
                     @click="goLocation(item.ACTION,item.OUT_OF_DATE,item.STATUS)"
                     >    
                    <!---------------------价格start------------------------->
                    <!--未过期-->
                    <div class="groupAmount" v-if="item.CATEGORY==1&&item.OUT_OF_DATE==0&&item.STATUS==1" style="color:#FCA96A;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="groupAmount" v-if="item.CATEGORY==2&&item.OUT_OF_DATE==0&&item.STATUS==1" style="color:#6691F7;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="groupAmount" v-if="item.CATEGORY==3&&item.OUT_OF_DATE==0&&item.STATUS==1" style="color:#40D4AE;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="groupAmount" v-if="item.CATEGORY==4&&item.OUT_OF_DATE==0&&item.STATUS==1" style="color:#CF8AF3;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <!--5-折扣券 6-免团券-->
                    <div class="groupAmount" v-if="item.CATEGORY==5&&item.OUT_OF_DATE==0&&item.STATUS==1" style="color:#40D4AE;">{{item.AMOUNT*10|keepTwoDot}}<span style='font-size:.36rem;'>折</span></div>
                    <div class="groupAmount groups" v-if="item.CATEGORY==6&&item.OUT_OF_DATE==0&&item.STATUS==1"></div>
                    <div class="groupAmount" v-if="item.CATEGORY==7&&item.OUT_OF_DATE==0&&item.STATUS==1" style="color:#CF8AF3;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <!--已过期-->
                    <div class="groupAmountGray" v-if="item.CATEGORY==1&&item.OUT_OF_DATE==1&&item.STATUS==1" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="groupAmountGray" v-if="item.CATEGORY==2&&item.OUT_OF_DATE==1&&item.STATUS==1" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="groupAmountGray" v-if="item.CATEGORY==3&&item.OUT_OF_DATE==1&&item.STATUS==1" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="groupAmountGray" v-if="item.CATEGORY==4&&item.OUT_OF_DATE==1&&item.STATUS==1" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <!--5-折扣券 6-免团券-->
                    <div class="groupAmountGray" v-if="item.CATEGORY==5&&item.OUT_OF_DATE==1&&item.STATUS==1" style="color:#bbb;">{{item.AMOUNT*10|keepTwoDot}}<span style='font-size:.36rem;'>折</span></div>
                    <div class="groupAmountGray groups" v-if="item.CATEGORY==6&&item.OUT_OF_DATE==1&&item.STATUS==1"></div>
                    <div class="groupAmountGray" v-if="item.CATEGORY==7&&item.OUT_OF_DATE==1&&item.STATUS==1" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <!--已使用-->
                    <div class="voucherMessUsed" v-if="item.CATEGORY==1&&item.STATUS==2" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="voucherMessUsed" v-if="item.CATEGORY==2&&item.STATUS==2" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="voucherMessUsed" v-if="item.CATEGORY==3&&item.STATUS==2" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <div class="voucherMessUsed" v-if="item.CATEGORY==4&&item.STATUS==2" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <!--5-折扣券 6-免团券-->
                    <div class="voucherMessUsed" v-if="item.CATEGORY==5&&item.STATUS==2" style="color:#bbb;">{{item.AMOUNT*10|keepTwoDot}}<span style='font-size:.36rem;'>折</span></div>
                    <div class="voucherMessUsed groups" v-if="item.CATEGORY==6&&item.STATUS==2"></div>
                    <div class="voucherMessUsed" v-if="item.CATEGORY==7&&item.STATUS==2" style="color:#bbb;"><span style='font-size:.36rem;'>￥</span>{{item.AMOUNT}}</div>
                    <!---------------------价格end------------------------->
                    <!--车品名、有效期、说明-->
                    <div class="voucherMess" :class="{voucherMessGray:item.OUT_OF_DATE==1&&item.STATUS==1,voucherMessUsed:item.STATUS==2}">
                        <h1>{{item.SUBJECT}}</h1>
                        <p>有效期至:{{item.EXP_DATE | filterTimes}}</p>
                        <p>{{item.REMARK}}</p>
                    </div>
                </div>
                <div class="noMoreDate"  v-if='noData'>
                    <div class="noMoreLine"></div>
                    <span>没有更多券了哟 ~</span>
                </div>
            </div>
        </scroller>
        <div class="noGroupVoucher" style="margin-top:1rem;font-size:.5rem;" v-if='noGroupVouchers'>            
            <p>暂无代金券</p>            
        </div>
        <div class="ticketExchange">
            <p @click="goExchangeTicket">兑换代金券</p>
            <p @click="goExchangeTB">通币换券</p>
        </div>        
    </div>
</template>
<script>
    import {XHeader, Tab, TabItem } from 'vux';
    import { setCookie, getCookie } from '../../util/commonUtils';
    export default {
        name: "ticket",
        // 数据
        data() {
            return{
                userId: '', //用户id   
                ticketType: 1, //代金券分类 1-未使用 2-已使用
                page: 1, //页数
                allGroupVoucher: [], //代金券数据
                canQuestion: false,
                noData: false, //判断代金券是否加载完成
                noGroupVouchers: false, //没有代金券
                unUsedTicket: 0, //未使用的代金券数量,新用户专享
            }
        },
        // 计算属性
        computed: {

        },
        // 创建（实例创建完成）
        created() {
            //请求实例        
            this.userId = getCookie('loginkey');
            //用户是否有剩余新用户卷可领取
            let phone = getCookie('userName');
            this.tel = phone;
            this.$fetchPost('/ActWeb/hasAvailableCashVol', {PHONE: phone}).then(res => {
                if (res.STATUS_CODE == 1) {
                    this.unUsedTicket = res.HASCASHVOL;                    
                }
            }, err => console.log(err));
        },
        // el被创建，并挂载到实例上
        mounted() {

        },
        // 方法（实例中的方法）-----------
        methods: {
            //代金券帮助
            help() {
                location.href = "http://112.124.107.78:8088/CARNT/cashVolumeRule.jsp";
            },
            //导航切换
            onItemClick(index) {
                this.allGroupVoucher = [];
                this.ticketType = index + 1;
                this.canQuestion = false;
                this.noData = false;
                this.page = 1;
                this.infinites();
            },
            //去领取代金券
            goGetTicket() {
                location.href = 'http://carnt.carnettong.com:8088/CARNT/act/chit/index.jsp?actId=100&gid=572495237465';
            },
            //代金券跳转对应页面
            goLocation(id, idd, iddd) {
                //已使用或已过期不让跳转
                if (idd == 1 || iddd == 2) {
                    return false;
                }
                if (id == 'maintain') { //保养
                    location.href = window.getIps + '/CARNT/jsp/pay/indexM.html#/maintainHome';
                } else if (id == 'meirong') {//美容
                    location.href = window.getIps + '/CARNT/jsp/pay/indexM.html#/cosmetology';
                } else if (id == 'spary') { //喷漆
                    location.href = window.getIps + '/CARNT/jsp/pay/index.html#/';
                } else if (id == 'carShop') { //车品兑换券
                    location.href = window.getIps + '/CARNT/jsp/pay/indexM.html#/carProduct';
                } else if (id == '4scafe') { //咖啡折扣券
                    location.href = window.getIps + '/4SCAFE/HTML5/aTestWx/dist/index.html?';
                } else if (id == 'shouye') { //首页
                    location.href = window.getIps + '/CARNT/jsp/pay/indexM.html#/homepage';
                } else if (id == 'freeGroupon') { //免团
                    location.href = window.getIps + '/CARNT/jsp/pay/indexM.html#/groupList';
                }
            },
            //兑换代金券
            goExchangeTicket() {
                this.$router.push('/exchangeTicket');
            },
            //兑换通币
            goExchangeTB() {
                this.$router.push('/getMacaroni?phone=' + this.tel);
            },
            //获取用户所有的代金券
            getUserAllGroupVoucher() {
                if (this.canQuestion) {
                    return;
                }
                this.canQuestion = true;
                this.$fetchPost('/CashVolumeWeb/getMyCashVolList', {
                    USER_ID: this.userId,
                    TYPE: this.ticketType,
                    PAGE_NO: this.page,
                    PAGE_SIZE: 10
                }).then(res => {
                    if (res.STATUS_CODE == 1) {
                        this.allGroupVoucher = this.allGroupVoucher.concat(res.RESULT_DATA);
                        if (res.RESULT_DATA.length < 10) {
                            this.$refs.myScroller.finishInfinite(2);
                            if (this.allGroupVoucher.length == 0) {
                                this.noGroupVouchers = true;
                            } else {
                                this.noData = true;
                            }
                        } else {
                            this.page++;
                            this.$refs.myScroller.finishInfinite();
                            this.canQuestion = false;
                        }
                    }
                }, err => {
                    console.log(err);
                })
            },
            infinites() {
                this.getUserAllGroupVoucher();
            },
        },
        // 子组件
        components: {
            XHeader,
            TabItem,
            Tab
        }
    }
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>      
    .myTicket{
        .myScroller{        	
            top: 1rem;
        }
        background:#efeff4;
        min-height:100%;
        .myTicketNav{
            height:.88rem; 
            background:#fff;
            position:relative;
            img{
                position:absolute;
                top:50%;
                transform:translateY(-50%);     
                width:0.36rem;
                height:0.36rem;
            }
            img:nth-of-type(1){                    
                left:.3rem;                    
            }
            img:nth-of-type(2){                    
                right:.3rem;
            }
        }
        .help{
            width:0.44rem;
            height:0.44rem;                
            img{
                width:0.44rem;
                height:0.44rem;                
            }
        }
        .myTicketUnused{        	
            height:0.8rem;                          
            width:5.62rem;
            height:0.8rem;
            margin: 0 auto;
            margin-top:.1rem;
            background: url(../../assets/image/ticket/entry1.png) no-repeat;
            background-size: 5.62rem 0.8rem;     	
            p{      		
                font-size:0.3rem;
                color:#ffffff;
                text-align: left;
                text-indent: 1rem; 
                line-height: 0.8rem; 
                span{
                    font-size:0.4rem;  
                    padding: 0 0.1rem;
                }
                label{
                    width: 0.18rem;
                    height: 0.18rem;
                    background: transparent;
                    display: inline-block;
                    border:0.03rem solid #fff;
                    border-width: 0.03rem 0.03rem 0 0;
                    transform:rotate(45deg);
                    margin-left: 0.05rem;
                }
            }
        }
        .allGroup{
            background: #efeff4;
            padding:0.2rem 0 0.3rem 0;
            .commentList{
                width: 6.96rem;
                height: 1.86rem;
                margin: 0.21rem auto 0;
                display: flex;
                align-items:center;
                .groupAmount{
                    width:2rem;
                    margin: 0 0 0 .8rem;
                    font-size:.88rem;                    
                }                
                .groupAmountGray{
                    width:2rem;
                    margin: 0 0 0 .8rem;
                    font-size:.88rem;                    
                }
                .voucherMessUsed{
                    width:2rem;
                    margin: 0 0 0 .8rem;
                    font-size:.88rem;                    
                }
                .groups{
                        margin-left:1.5rem;
                        margin-right:.65rem;                        
                }
                .voucherMess{                                        
                    text-align: left;                    
                    margin-left:.5rem;
                    h1{
                        font-size: 0.32rem;
                        margin-bottom: 0.05rem;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        display:-webkit-box;
                        -webkit-line-clamp:1;
                        -webkit-box-orient:vertical;
                    }
                    p{
                        font-size: 0.22rem;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        display:-webkit-box;
                        -webkit-line-clamp:1;
                        -webkit-box-orient:vertical;
                    }
                    p:last-child{
                        font-size: 0.26rem;
                        margin-top: 0.35rem;                        
                    }
                }                
            }
            .noMoreDate{
                position: relative;
                height: 0.6rem;
                margin-bottom:-0.5rem;
                z-index: 999;
                padding-top: 0.5rem;
                .noMoreLine{
                    width: 2.9rem;
                    margin: 0 auto;
                    height: 0.02rem;
                    background: #777;
                    transform:scaleY(0.5);
                }
                span{
                    font-size: 0.22rem;
                    color: #666;
                    padding: 0 0.1rem;
                    position: absolute;
                    background: #efeff4;
                    transform:translate(-50%,-50%);
                }
                .noMoreList{
                    background: #fff!important;
                }
            }
            /*1-橙色 2-蓝色 3-青色 4-N元券-紫色 5折扣券-绿色 6-免费开团券-粉红色 7-新N元券*/
            .category_1{
                background:url('../../assets/image/ticket/23.png') no-repeat;
                background-size: 6.96rem 1.86rem;                
                .voucherMess{
                    color:#FCA96A;
                }
                .voucherMessGray{
                    color:#bbb;
                }
                .voucherMessUsed{
                    color:#bbb;
                }
            }
            .category_2{
                background:url('../../assets/image/ticket/21.png') no-repeat;
                background-size: 6.96rem 1.86rem;                
                .voucherMess{
                    color:#6691F7;
                }
                .voucherMessGray{
                    color:#bbb;
                }
                .voucherMessUsed{
                    color:#bbb;
                }
            }
            .category_3{
                background:url('../../assets/image/ticket/24.png') no-repeat;
                background-size: 6.96rem 1.86rem;                
                .voucherMess{
                    color:#40D4AE;
                }
                .voucherMessGray{
                    color:#bbb;
                }
                .voucherMessUsed{
                    color:#bbb;
                }
            }
            .category_4{
                background:url('../../assets/image/ticket/25.png') no-repeat;
                background-size: 6.96rem 1.86rem;                
                .voucherMess{
                    color:#CF8AF3;
                }
                .voucherMessGray{
                    color:#bbb;
                }
                .voucherMessUsed{
                    color:#bbb;
                }
            }
            .category_5{
                background:url('../../assets/image/ticket/24.png') no-repeat;
                background-size: 6.96rem 1.86rem;                
                .voucherMess{
                    color:#40D4AE;
                }
                .voucherMessGray{
                    color:#bbb;
                }
                .voucherMessUsed{
                    color:#bbb;
                }
            }
            .category_6{
                background:url('../../assets/image/ticket/groupTicket1.png') no-repeat;
                background-size: 6.96rem 1.86rem;
                .groupAmount{
                    width:.85rem;
                    height:.79rem;
                    background: url(../../assets/image/ticket/freeRed.png) no-repeat;
                    background-size: 0.85rem 0.79rem;
                }
                .groupAmountGray{
                    width:.85rem;
                    height:.79rem;
                    background: url(../../assets/image/ticket/noUse.png) no-repeat;
                    background-size: 0.85rem 0.79rem;    
                }                   
                .voucherMess{
                    color: #F874A0;                    
                }
                .voucherMessGray{
                    color:#bbb;
                }
                .voucherMessUsed{
                    color:#bbb;
                }
            }
            .category_7{
                background:url('../../assets/image/ticket/25.png') no-repeat;
                background-size: 6.96rem 1.86rem;                
                .voucherMess{
                    color:#CF8AF3;
                }
                .voucherMessGray{
                    color:#bbb;
                }
                .voucherMessUsed{
                    color:#bbb;
                }
            }
            .category_gray{
                background:url('../../assets/image/ticket/dated1.png') no-repeat;
                background-size: 6.96rem 1.86rem;                                
                .voucherMessGray{
                    color:#bbb;
                }    
            }
            .category_used{
                background:url('../../assets/image/ticket/used3.png') no-repeat;
                background-size: 6.96rem 1.86rem;                                
                .voucherMessGray{
                    color:#bbb;
                }   
            }
        }
        .ticketExchange{
            position:fixed;
            bottom:0;
            width:7.5rem;
            height:.9rem;
            background:#fff;
            z-index:9999;                   
            p{
                font-size:.28rem;
                color:#555;
            }
            p:nth-child(1){                        
                width:3.75rem;
                height:.9rem;
                display:table-cell;
                vertical-align:middle;
                position:relative;
                &:after{
                    content:'';
                    position:absolute;
                    right:0;
                    top:50%;
                    transform:translateY(-50%);
                    width:1px;
                    height:.5rem;
                    background:#ccc;
                }
            }
            p:nth-child(2){
                width:3.75rem;
                height:.9rem;
                display:table-cell;
                vertical-align:middle;
            }
        }
    }
</style>
